<template>

  <el-row :gutter="32">
    <el-col :lg="8">

      <div class="   ml20 mt40 classflex-left ">
        <div class="grid-content bg-purple-dark  ml20  text-size-23-w700  ">上课记录</div>
      </div>

      <div class="content ml20">

       
        <div class="item"  >

          <div class="text-gray text-size-14 ">上课次数</div>

          <div class=" text-black text-size-20 mt20 ">{{total}}</div>
        
        </div>
        <div class="item"  >
        
          <div class="text-gray text-size-14 ">上课课时</div>
        
          <div class=" text-black text-size-20 mt20 ">{{allclassHours}}</div>
  
        
        </div>
        <div class="item"  >
        
          <div class="text-gray text-size-14 ">累计课消</div>
        
          <div class=" text-black text-size-20 mt20 ">{{alltotalConsumption}}</div>
        
        </div>

        <!-- </el-card> -->
      </div>
      <el-divider></el-divider>
      <div class=" classflex-space-between ml30">

        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" label-width="80px">
          <div>
            <el-form-item label="创建时间">
              <el-date-picker v-model="dateRange" style="width: 360px" value-format="yyyy-MM-dd" type="daterange"
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </div>


          <div>
            <el-form-item label="上课课程" prop="classCourse">

              <el-select style="width: 360px;" v-model="classCourse" placeholder="请选择报名课程" filterable
                @change="ChangeCourseName">
                <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName" :value="dict.courseName">
                </el-option>

              </el-select>


            </el-form-item>
          </div>
          <div>
            <el-form-item label="上课班级" prop="className">

              <el-select v-model="className" placeholder="请选择班级" filterable  >
                <el-option v-for="dict in schoolclassList" :key="dict.id" :label="dict.className"
                  :value="dict.className">
                </el-option>

              </el-select>

              <!-- <el-select v-model="className" style="width: 360px" placeholder="请选择上课班级" clearable>
                <el-option v-for="dict in dict.type.order_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select> -->



            </el-form-item>
          </div>
          <div class="">
            <el-form-item label="上课教师" prop="teacher">
              <!-- <el-input v-model="queryParams.orderStudentName" style="width: 360px" placeholder="搜索教师姓名" clearable
                 @keyup.enter.native="handleQuery" /> -->

              <el-select style="width: 360px;" v-model="classTeacher" placeholder="请选择上课教师" filterable>
                <el-option v-for="dict in userList" :key="dict.id" :label="dict.nickName" :value="dict.nickName">
                </el-option>

              </el-select>

            </el-form-item>
          </div>
          <div>
            <el-form-item label="上课学员" prop="courseNowStudent">
              <el-select style="width: 360px;" v-model="classStudent" placeholder="请选择学员姓名" filterable>
                <el-option v-for="dict in studentList" :key="dict.id" :label="dict.userName" :value="dict.userName">
                </el-option>

              </el-select>
            </el-form-item>
          </div>

          <el-divider></el-divider>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" style="width: 300px;" @click="handleQuery">确定</el-button>

          </el-form-item>
        </el-form>
      </div>
    </el-col>



    <el-col :lg="16">

      <div style="height: 700px;" class="mt50 mr20">
        <div style="height: 80%;">
          <el-table v-loading="loading" :data="schedulingList" @selection-change="handleSelectionChange" border>

            <el-table-column label="上课日期" align="center" prop="studyDate" />
            <el-table-column label="上课时间" align="center" prop="classStart" />
            <el-table-column label="课程名称" align="center" prop="classCourse" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="课时" align="center" prop="classHours" />
            <el-table-column label="授课教师" align="center" prop="classTeacher" />

            <el-table-column label="考勤员" align="center" prop="classAttendant" />
            <el-table-column label="学员数" align="center" prop="classStudent" />
            <el-table-column label="课消数" align="center" prop="totalConsumption" />
            <!-- <el-table-column label="在读学员" align="center" prop="courseNowStudent" /> -->
            <el-table-column label="出勤率" align="center" prop="attendance" />

          </el-table>

        </div>
        <div>
          <pagination v-show="total>0" :total="total" :page.sync="queryParamsScheduling.pageNum"
            :limit.sync="queryParamsScheduling.pageSize" @pagination="getSchedulingList" />
        </div>
      </div>



    </el-col>

  </el-row>




  </div>


</template>

<script>
  import {
    listClassrecords,
    getClassrecords,
    delClassrecords,
    addClassrecords,
    updateClassrecords
  } from "@/api/classrecords/classrecords";
  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  import {
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder
  } from "@/api/order/order";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  import {
    schedulingtablelist,
    listScheduling,
    getScheduling,
    delScheduling,
    addScheduling,
    updateScheduling
  } from "@/api/scheduling/scheduling";
  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";
  export default {
    name: "Classrecords",
    dicts: ['order_type'],
    data() {
      return {
        list: [{
          id: 0,
          name: "上课次数",
          num: "838次",
        }, {
          id: 1,
          name: "上课课时",
          num: "31课时",
        }, {
          id: 2,
          name: "累计课消",
          num: "31课时",
        }],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 上课记录表格数据
        classrecordsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          date: null,
          time: null,
          courseName: null,
          classId: null,
          className: null,
          courseNum: null,
          teacher: null,
          studentNum: null,
          attendanceTeacher: null,
          courseCancellations: null,
          courseNowStudent: null,
          attendance: null,
          deptId: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        // 日期范围
        dateRange: [],
        // 学生信息表格数据
        studentList: [],
        queryParamsStudent: {},
        courseList: [],
        queryParamsCourse: {},
        queryParamsTeacher: {},
        userList: [],
        classCourse: "",
        className: "",
        classTeacher: "",
        classStudent: "",
        queryParamsScheduling: {
          pageNum: 1,
          pageSize: 10,
        },
        queryParamsSchool: {},
        schoolclassList: [],
        schedulingList: [],
        allclassHours: "",
       alltotalConsumption : ""

      };
    },
    created() {
      this.classCourse = "全部课程";
      this.classTeacher = "全部教师";
      this.classStudent = "全部学生";
      this.className = "全部班级";

      this.getStudentList();
      this.getCourseList();
      this.getTeacherList();
      this.getSchedulingList();
    },
    mounted() {
      const params = this.$route.query; // 获取query对象
      // console.log("zz:" + params.name); // 输出{key: 'value'}
      if (params.name != null) {
        this.queryParams.courseNowStudent = params.name;
      }

    },
    watch: {

      'classCourse': {
        handler() {


          if (this.classCourse == "全部课程") {
            this.queryParamsScheduling.classCourse = null;
          } else {
            this.queryParamsScheduling.classCourse = this.classCourse;
          }
        }
      },
      'className': {
        handler() {


          if (this.className == "全部班级") {
            this.queryParamsScheduling.className = null;
          } else {
            this.queryParamsScheduling.className = this.className;
          }
        }
      },
      'classTeacher': {
        handler() {


          if (this.classTeacher == "全部教师") {
            this.queryParamsScheduling.classTeacher = null;
          } else {
            this.queryParamsScheduling.classTeacher = this.classTeacher;
          }
        }
      },
      'classStudent': {
        handler() {


          if (this.classStudent == "全部学生") {
            this.queryParamsScheduling.classStudent = null;
          } else {
            this.queryParamsScheduling.classStudent = this.classStudent;
          }
        }
      },
    },
    methods: {
      handleSelectionChange(e){

      },
      ChangeCourseName(classCourse) {
        const iclassCourse = this.courseList.find(item => item.courseName == classCourse);
        // console.log(iclassCourse);
        // this.form.classCourseId=iclassCourse.id;
        this.$set(this, 'className', null)


        this.getSchoolclassList(classCourse)
      },
      /** 查询班级列表 */
      getSchoolclassList(classCourse) {
        this.queryParamsSchool.classCourse = classCourse;
        this.queryParamsSchool.deptId = this.$store.state.user.deptId;
        listSchoolclass(this.queryParamsSchool).then(response => {
          this.schoolclassList = response.rows;

        });
      },
      getTeacherList() {

        this.queryParamsTeacher.deptId = this.$store.state.user.deptId;

        listUser2(this.queryParamsTeacher).then(response => {
          this.userList.push({
            "id": "100",
            "nickName": "全部教师"
          })
          this.userList.push(...response.rows)

        });
      },
      /** 查询课程管理列表 */
      getCourseList() {
        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
        this.queryParamsCourse.courseState = "在开课程";
        listCourse(this.queryParamsCourse).then(response => {
          this.courseList.push({
            "id": "100",
            "courseName": "全部课程"
          })
          this.courseList.push(...response.rows)

        });
      },
      /** 查询学生信息列表 */
      getStudentList() {

        this.queryParamsStudent.deptId = this.$store.state.user.deptId;
        listStudent(this.queryParamsStudent).then(response => {
          this.studentList.push({
            "id": "100",
            "userName": "全部学生"
          })
          this.studentList.push(...response.rows)


        });
      },

      getSchedulingList() {
        this.loading = true;
        this.queryParamsScheduling.state = "已结算";
        this.queryParamsScheduling.deptId = this.$store.state.user.deptId;
        listScheduling(this.addDateRange(this.queryParamsScheduling, this.dateRange)).then(response => {
          this.schedulingList = response.rows;
          
          // this.classhour=
          let allclassHours = 0;
          let alltotalConsumption = 0;
          for (var i = 0; i < this.schedulingList.length; i++) {
            var sumclassHours = parseFloat(this.schedulingList[i].classHours);
            var sumtotalConsumption = parseFloat(this.schedulingList[i].totalConsumption);
            allclassHours = allclassHours + sumclassHours;
            alltotalConsumption = alltotalConsumption + sumtotalConsumption
          
          
          }
          
          this.allclassHours = allclassHours;
          this.alltotalConsumption = alltotalConsumption;
          
          
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParamsScheduling.pageNum = 1;
        this.getSchedulingList();
      },




      // 表单重置
      reset() {
        this.form = {
          id: null,
          date: null,
          time: null,
          courseName: null,
          classId: null,
          className: null,
          courseNum: null,
          teacher: null,
          studentNum: null,
          attendanceTeacher: null,
          courseCancellations: null,
          courseNowStudent: null,
          attendance: null,
          deptId: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },








    }
  };
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 100px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemrightboot {
    flex: 0 0 calc((100% - 20px)/2);
    height: 280px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }
</style>
